<template>
	<div class="container" v-if="detailsDialogVisible">
		<el-dialog title="变量详情" :visible.sync="detailsDialogVisible" width="500px;" :before-close="handleClose" :destroy-on-close="true" append-to-body>
			<el-form :model="form" :rules="rules" ref="addVariableRef" label-width="100px" class="demo-ruleForm" label-position="left">
				<el-form-item label="脱敏配置" prop="">
					<el-switch v-model="form.showSwitch" disabled> </el-switch>
				</el-form-item>
				<div v-if="form.showSwitch" class="desensitization-box">
					<el-form-item label="脱敏配置模式" prop="desensConfigMode" class="pattern">
						<el-select v-model="form.desensConfigMode" placeholder="请选择脱敏模式" style="width: 95%" disabled> </el-select>
					</el-form-item>
					<el-form-item label="AI播报话术脱敏规则" :required="true">
						<el-select v-model="form.speechCheck" placeholder="" style="width: 95%" disabled> </el-select>
					</el-form-item>

					<el-form-item label="访客端字幕&聊天记录脱敏规则" :required="true" class="guest-subtitle-label">
						<el-select v-model="form.chatmsgCheck" placeholder="" style="width: 95%" disabled> </el-select>
					</el-form-item>
					<el-form-item label="录像文件字幕脱敏规则" :required="true">
						<el-select v-model="form.subtitleCheck" placeholder="" style="width: 95%" disabled> </el-select>
					</el-form-item>
				</div>

				<el-form-item label="变量名" prop="variableName" :class="isShowErrorText ? 'errorText-label' : ''" style="margin-top: 16px">
					<el-input v-model="form.variableName" placeholder="例如：年龄" maxlength="20" :class="isShowErrorText ? 'borderErr' : ''" style="width: 95%" disabled></el-input>
					<p class="error-text" v-show="isShowErrorText">当前变量名已被创建</p>
				</el-form-item>
				<!-- 	<el-form-item label="变量描述" prop="describe">
					<el-input v-model="form.describe" placeholder="例如：年龄" maxlength="10" style="width: 95%" disabled></el-input>
				</el-form-item> -->
				<el-form-item label="初始化方式" prop="initializationMode" disabled>
					<el-select v-model="form.initializationMode" placeholder="" style="width: 95%" @change="onChangeApi" disabled>
						<el-option v-for="item in initModeOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>

				<template v-if="initMode !== 'non-init'">
					<el-form-item label="初始化字段" prop="initializeField">
						<el-input v-model="form.initializeField" placeholder="" style="width: 95%" disabled></el-input>
					</el-form-item>
				</template>

				<template v-if="initMode === 'api-data'">
					<el-form-item label="URL地址" prop="urlAddress">
						<el-input v-model="form.urlAddress" placeholder="请输入URL地址" id="urlAddress" class="input-textOverFlow" disabled> </el-input>
					</el-form-item>
					<el-form-item label="调用方式" prop="callMode">
						<el-select v-model="form.callMode" placeholder="" style="width: 95%" @change="onChangeMode" disabled>
							<el-option v-for="item in callModeOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</el-form-item>
					<template v-if="form.callMode === 'post'">
						<el-form-item label="传参变量" prop="" v-if="form.transferParameterVariable && form.transferParameterVariable.length > 0">
							<el-select v-model="form.transferParameterVariable" placeholder="请选择传参的变量" style="width: 95%" multiple value-key="describe" disabled>
								<el-option v-for="item in transferParameterVariableOption" :label="item.name" :key="item" :value="item"></el-option>
							</el-select>
						</el-form-item>
					</template>
				</template>

				<el-form-item label="变量类型" prop="type">
					<el-select v-model="form.type" placeholder="" style="width: 95%" disabled>
						<el-option label="文本/字符串" value="text"></el-option>
						<el-option label="数值" value="numeric"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: '',
	components: {},
	props: {
		detailsDialogVisible: {
			required: true,
			type: Boolean,
			default: () => false
		},
		variableDetailsData: {
			type: Object,
			default: () => {}
		},
		showDetail: {
			type: Boolean,
			default: () => false,
			required: true
		},
		isShowErrorText: {
			required: true,
			type: Boolean,
			default: () => false
		},
		isShowField: {
			required: true,
			type: Boolean,
			default: () => false
		},
		initMode: {
			required: true,
			type: String,
			default: () => 'non-init'
		}
	},
	data() {
		return {
			form: {},
			variableName: '',
			describe: '',
			initModeOption: [
				{ label: '随路数据', value: 'user-data' },
				{ label: '非初始化', value: 'non-init' },
				{ label: 'API获取', value: 'api-data' }
			],
			callModeOption: [
				{ label: 'get方法', value: 'get' },
				{ label: 'post方法', value: 'post' }
			],
			transferParameterVariableOption: [], // 传参变量option下拉框列表
			pageData: {
				page: 1,
				pageSize: 100,
				total: 0
			},
			isShowApi: false,
			isShowTransferVariable: false,
			showSwitch: false,
			selectCheck: [],
			checkboxList: [
				{ label: '脱敏地址区', value: 'address' },
				{ label: '脱敏生日区', value: 'birthday' },
				{ label: '脱敏生日月日区', value: 'monthDay' },
				{ label: '脱敏顺序号', value: 'sequenceNumber' }
			],
			desensitizationOption: [
				{ label: '姓名', value: 'userName' },
				{ label: '身份证号', value: 'idCard' },
				{ label: '手机号', value: 'phoneNumber' },
				{ label: '家庭地址', value: 'homeAddress' }
			],
			userNameOption: [
				{ label: '不脱敏', value: 0 },
				{ label: '全脱敏', value: 4 },
				{ label: '保留首字', value: 1 },
				{ label: '保留末字', value: 2 },
				{ label: '首末各留一字', value: 3 }
			],
			rulesOption: [
				{ label: '不脱敏', value: 0 },
				{ label: '全脱敏', value: 15 }
			],
			idCardCheck: [
				{ label: '脱敏地址区', value: 1, id: 1, checked: false },
				{ label: '脱敏生日区', value: 4, id: 2, checked: false },
				{ label: '脱敏生日月日区', value: 8, id: 3, checked: false },
				{ label: '脱敏顺序号', value: 2, id: 4, checked: false }
			],
			mobileOption: [
				{ label: '不脱敏', value: 0 },
				{ label: '全脱敏', value: 4 },
				{ label: '保留前三位', value: 1 },
				{ label: '保留后四位', value: 2 },
				{ label: '脱敏中间四位', value: 3 }
			],
			addressOption: [
				{ label: '不脱敏', value: 0 },
				{ label: '全脱敏', value: 4 },
				{ label: '保留首字', value: 1 },
				{ label: '保留末字', value: 2 },
				{ label: '首末各留一字', value: 3 }
			]
		};
	},
	mounted() {
		// this.initVariablesList();
		this.form = this.variableDetailsData;
		console.log(this.variableDetailsData);
		console.log(this.form, 'form');
	},
	methods: {
		handleClose() {
			this.$emit('closeVariableDetail');
		},

		onChangeApi() {
			console.log(this.form.initializationMode);
			if (this.form.initializationMode === 'api-data') {
				this.isShowApi = true;
				// this.initVariablesList();
				if (this.form.callMode === 'post') {
					this.isShowTransferVariable = true;
				} else {
					this.isShowTransferVariable = false;
				}
			} else {
				this.isShowApi = false;
				this.isShowTransferVariable = false;
			}
		},
		onChangeMode() {
			if (this.form.callMode === 'post') {
				this.isShowTransferVariable = true;
			} else {
				this.isShowTransferVariable = false;
			}
		}
	}
};
</script>

<style scoped lang="less">
.btns {
	background: #6384fe;
}

.error-text {
	color: #ef5753;
	// margin: -19px 0 0 120px;
	// width: 200px;
	position: absolute;
	top: 28px;
	left: 0;
}

.desensitization-box {
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	.pattern {
		padding-top: 12px;
	}
}
/* .line {
	height: 2px;
	background: #eee;
	width: 96%;
	display: block;
	margin-left: 10px;
} */
</style>
<style lang="less">
.borderErr {
	.el-input__inner {
		border-color: #f56c6c !important;
	}
}

.errorText-label .el-form-item__error {
	display: none;
}

.transfer-select .el-input__inner {
	height: none !important;
}

// 多余内容在失焦时....展示
.input-textOverFlow .el-input__inner {
	width: 95%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.desensitization-box .el-form-item__label {
	padding: 8px 0 0 13px;
	line-height: normal;
}
.guest-subtitle-label .el-form-item__label {
	width: 100px;
}
</style>
